<template>
  <header class="side_box">
    <div class="menu_panel" v-for="(item, index) in list" :key="index">
      <h3 class="title">{{item.navName}}</h3>
      <ul class="menus">
        <li :class="{on: now == that.id}" v-for="(that, index)  in item.websiteNavList" :key="index">
          <router-link :to="{path:'/terrace',query:{id:that.id}}">{{that.navName}}</router-link>
        </li>
      </ul>
    </div>
  </header>
</template>
<script>
  // import {aboutList} from '~/api/main.js'
  export default {
    props: {
      type: {
        type: String,
        default: 'jszm'
      },
      showSide: {
        type: String,
        default: 'zm'
      }
    },
    watch:{
      $route(to,from){
        this.sidereload()
      }
    },
    data () {
      return {
        list: [
          {
            navName:"关于我们",
            websiteNavList:[
              {
                id:"lxwm",
                navName:"联系我们"
              },{
                id:"gsjj",
                navName:"公司简介"
              }
            ]
          },{
            navName:"商务合作",
            websiteNavList:[
              {
                id:"sybgm",
                navName:"商业版购买"
              }
            ]
          },{
            navName:"常见问题",
            websiteNavList:[
              {
                id:"rhgm",
                navName:"如何购买"
              }
            ]
          }
        ],
        now: ''
      }
    },
    methods: {
      changeAbout (id) {
        this.now = id
        // this.$emit('changeInfo', id)
        this.$router.push({name: 'terrace-id', params: {id}})
      },
      sidereload() {
        if (this.$route.query.id) {
          this.now = this.$route.query.id
        }
      }
    },
    mounted () {
      this.sidereload()
    }
  }
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
  .side_box{
    border-radius: 6px 6px 0 0;
    float: left;
    width: 168px;
  }
  .menu_panel{
    background-color: #fff;
    margin-bottom: 20px;
    border-radius: 6px 6px 0 0;
    .title{
      font-size: 14px;
      color: #333;
      line-height: 60px;
      padding: 0 35px;
      border-bottom: 1px solid rgb(242, 242, 242);
      i{
        padding-right: 6px;
        font-size: 16px;
        position: relative;
        left: -5px;
      }
    }
  }
  .menus{
    li{
      list-style-type:none;
      line-height: 40px;
      // padding-left: 35px;
      text-align: center;
      &:hover,&.on{
        a{
          color: #D51423;
        }
      }
    }
    a{
      color: #333;
      font-size: 14px;
    }
  }
</style>
